<!DOCTYPE html>
<html lang="cmn">
<head>
	<meta charset="UTF-8">
	<title>轮播图2</title>
	<style type="text/css">
		ol,ul{
			list-style-type: none;
		}
		a{
			text-decoration: none;
		}
		ol>li{
			float: left;
			border:1px solid #EEB422;
			padding: 5px;
			margin:10px;
			color: #FFD700;
			background-color: #fff;
		}
		ul{
			padding-left: 300px;
		}
		ol{
			position: absolute;
			top: 400px;
			left: 600px;
		}
		ul>li{
			display: none;
		}
		.olShow{
			background-color: #FFD700;
			color: #fff;
		}
	</style>
</head>
<body>
	<ul>
		<li style='display:block'><img src="pic/11.jpg" /></li>
		<li><img src="pic/22.jpg" /></li>
		<li><img src="pic/33.jpg" /></li>
		<li><img src="pic/44.jpg" /></li>
		<li><img src="pic/55.jpg" /></li>
		<li><img src="pic/66.jpg" /></li>
	</ul>
	
	<ol>
		<li class="olShow"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
	</ol>



	
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var oUL=document.getElementsByTagName('ul')[0];
			var ulLi=oUL.getElementsByTagName('li');					//ul中的li 的集合
			
			var oOL=document.getElementsByTagName('ol')[0];
			var olLi=oOL.getElementsByTagName('li');					//ol中的li 的集合
			
			
			for(var i=0;i<olLi.length;i++){
				olLi[i].index=i;
				olLi[i].onmouseover=function(){
					for(var i=0;i<olLi.length;i++){
						olLi[i].className=' ';
						ulLi[i].style.display='none';
						ulLi[i].style.opacity=0;
					}
					this.className='olShow';
					ulLi[this.index].style.display='block';
					$(ulLi).eq(this.index).fadeTo(1000,1.0);
				}
			}
			
			
			
			
		}
		
	</script>

</body>
</html>